<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/6 10:24
    @Version 1.0
    @Description 构建选项卡
  -->
    <meta charset="UTF-8">
    <title>提取事件</title>
    <style>
        #div1 .active{background: yellow;} <!--定义一个active类，在这个类中设置一些样式：-->
        #div1 div {width: 200px;height: 200px;background: #CCC;border:1px solid #999;display：none;}
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            var oBut = oDiv.getElementsByTagName("input");
            var aDiv = oDiv.getElementsByTagName("div");

            //先让所有的都隐藏，然后将当前的显示出来
            for (var i = 0;i < oBut.length;i ++){
                oBut[i].index = i;  //让按钮和div对应上，而添加的索引
                oBut[i].onclick = function () {
                    //this表示当前发生事件的元素
                    // alert(this.value);
                    for (var i = 0;i < oBut.length;i ++){
                        oBut[i].className ='';
                        aDiv[i].style.display = 'none'; //让当前div显示出来
                    }
                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';
                };
            }
        };
    </script>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="教育">
        <input type="button" value="培训">
        <input type="button" value="招生">
        <input type="button" value="出国">
        <div style="display: block;">1111</div>
        <div style="display: none;">2222</div>
        <div style="display: none;">3333</div>
        <div style="display: none;">4444</div>
    </div>
</body>
</html>